<template>
  <view>
    <u-sticky>
      <view>
        <view class="bgWhite">
          <view>
            <view class="searchBOx u-flex u-p-l-20" @click="navigateTo( `/pages-users/order/search/index?type=${orderType}`)">
              <u-icon name="search" color="#aaaaaa"></u-icon>
              <text class="u-p-l-10">搜索我的订单</text>
            </view>
          </view>
          <up-tabs :list="tablist" @click="onTabClick" :scrollable="false" :current="currentTab" :inactiveStyle="{
		      	           fontWeight: '400',
		      	           fontSize: '28rpx',
		      	           lineHeight:2.5,
		      	           color: '#5C5C5C',
		      	         }" :activeStyle="{
		      	           fontWeight: '600',
		      	           fontSize: '28rpx',
		      	           lineHeight:2.5,
		      	           color: '#202020',
		      	         }" :lineHeight="5" lineColor="#00C1B9">
          </up-tabs>
        </view>
      </view>
    </u-sticky>
    <view class="pages">
      <view class="card" v-for="(item,index) in articelList" :key="index" >
        <view class="  u-p-b-20 u-flex u-border-bottom">
          <view class="u-flex-1 text">订单号：{{ item?.sn }}</view>
          <view></view>
        </view>

        <view v-if="item?.status == 2" class="rightTop"></view>
        <view class="status status1" v-if="item?.status==2">问诊中</view>
        <view class="status" style="color: #00C1B9;" v-if="item?.status==1">待问诊</view>
        <view class="status" style="color: #AAAAAA;"  v-if="item?.status > 2" >已完成</view>
        <view @click="navigateTo(`/pages-users/order/orderDetail?id=${item?.id}`)">
          <view class=" u-p-t-20 u-flex">
            <image src="https://ossresource.miyingbl.com/def/c0c17202406251553104065.png" mode="" class="icon"></image>
            <view class="text">患者：</view>
            <view class="text1">{{ item?.u_name }}</view>
          </view>
          <view class=" u-p-t-20 u-flex" v-if="orderType == 2">
            <image src="@/static/main/man_type.png" mode="" class="icon"></image>
            <view class="text">类型：</view>
            <view class="text1">{{ item?.disease_name }}</view>
          </view>
          <view class="u-p-t-20 u-flex" v-if="orderType == 2">
            <image src="https://ossresource.miyingbl.com/def/877d020240625162532472.png" mode="" class="icon"></image>
            <view class="text">主诉：</view>
            <view class="text1 line1 u-flex-1">{{ item?.describe }}</view>
          </view>
          <view class="u-p-t-20 u-flex">
            <image src="https://ossresource.miyingbl.com/def/6a338202406251626167896.png" mode="" class="icon"></image>
            <view class="text">服务类型：</view>
            <view class="text1" v-if="item?.type == 1">孕产跟踪</view>
            <view class="text1" v-if="item?.type == 2">男性跟踪</view>
            <view class="text1" v-if="item?.type == 3">儿科跟踪</view>
          </view>
          <view class="u-p-t-20 u-p-b-20 u-flex u-border-bottom">
            <image src="https://ossresource.miyingbl.com/def/37194202406251624075828.png" mode="" class="icon"></image>
            <view class="text">问诊时间：</view>
            <view class="text1">{{ item?.last_time }}</view>
          </view>
        </view>
        <view class="u-p-t-20 u-flex u-row-right">

          <view class="u-flex-1 u-flex u-flex-items-end">
             <view class="text">订单金额：</view>
            <text style="font-size: 26rpx;">￥</text><text class="price">{{ item?.total_price.split('.')[0] }}</text>.<text style="font-size: 26rpx;">{{ item?.total_price.split('.')[1] }}</text>
          </view>
          <view class="u-flex u-row-right">
            <view class="btns" @click="toInterrogation(item)" v-if="item?.status > 2">查看问诊历史</view>
            <view class="btns" @click.stop="toInterrogation(item)" v-else>发起问诊</view>
          </view>

        </view>
      </view>
      <h-not-list
        v-if="loaded && articelList.length == 0"
        title="暂无订单"
        defaultHeight="600"
        marginBottom="30"
        img="/static/imgs/default_suggest.png"
      ></h-not-list>
    </view>
  </view>
</template>

<script setup>
import {
  ref
} from "vue"
import { onLoad, onReachBottom, onShow } from '@dcloudio/uni-app'
import { getOrderListApi } from '@/api/patients/index'
import {
  navigateTo,
  showToast,
  navigateBack
} from '@/utils'
const currentTab = ref(0)
const tablist = ref([{
    name: '全部',
    id: 0
  },
  {
    name: '问诊中',
    id: 1
  },
  {
    name: '已完成',
    id: 2
  },
  // {
  //   name: '退款',
  //   id: 3
  // }
])
const cateIndex = ref(0)
const orderType = ref(1)
onLoad((o)=>{
  if(o.type){
    params.value.order_type = o.type
    orderType.value = o.type
    o.type == 1 ? tablist.value = tablist.value.splice(0, 2) : tablist.value = tablist.value
    getList()
  }
})
//订单列表
const articelList = ref([])
const params = ref({
  page: 1,
  limit: 15,
  type:0,
  order_type:1,
  keyword:''
})
// 切换顶部tab
const onTabClick = (e) => {
  console.log(e)
  currentTab.value = e.id
  articelList.value = []
  params.value.type = e.id
  cateIndex.value = 0
  params.value.page = 1
  getList()
}
// const onCateClick = (index, id) => {
//   articelList.value = []
//   cateIndex.value = index
//   params.value.page = 1
//   getList()
// }

const list = ref([{
  status: 1
}, {
  status: 3
}, {
  status: 2
}])
//问诊
function toInterrogation(row) {
  if(row?.type == 2){
    navigateTo(
      `/pregnancys/index/doctor-chat?uid=${row?.uid}&name=${row?.u_name}&avatar=${row?.avatar}&chat_type=${row.type}`,
    )
  }else{
    navigateTo(
    `/pregnancys/index/doctor-chat?uid=${row?.userInfo?.uid}&name=${row?.userInfo?.nickname}&avatar=${row?.userInfo?.avatar}&chat_type=${row.type}&childId=${row?.children_user_id}`,
    )
  }

}
//问诊历史
// const toHistoryMsg = (row) =>{
//   navigateTo(`/pregnancys/index/doctor-chat-message?id=${row?.uid}&avatar=${row?.avatar}&nickname=${row?.u_name}`)
// }
//获取订单列表
const lastPage = ref(0)
const loaded = ref(false)
async function getList(){
  loaded.value = false
  const res = await getOrderListApi(params.value)
  if(res?.code == 200){
    lastPage.value = res?.data?.last_page
    let list = res?.data?.data
    loaded.value = true
    articelList.value = params.value.page == 1 ? list : articelList.value.concat(list)
  }else{
    loaded.value = true
  }
}
onReachBottom(() => {
  if (lastPage.value > params.value.page) {
    params.value.page++
    getList()
  }
})
</script>

<style>
  page {
    background: #F5F6F8;
  }
</style>
<style lang="scss" scoped>
  .bgWhite {
    background-color: #fff;
  }

  .searchBOx {
    width: 702rpx;
    height: 70rpx;
    background: #F5F6F8;
    border-radius: 35rpx;
    margin: 0 auto;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 26rpx;
    color: #AAAAAA;
  }

  .pages {
    padding: 24rpx;
  }

  .cateBox {
    padding: 20rpx 30rpx;

    .cateItem {
      width: 160rpx;
      height: 48rpx;
      line-height: 48rpx;
      // background: #F5F6F8;
      border-radius: 24rpx;
      font-size: 28rpx;
      color: #AAAAAA;
      text-align: center;
      margin-right: 20rpx;

      &.active {
        background: #00C1B9;
        border-radius: 24rpx;
        color: #fff;
      }
    }
  }

  .card {
    background: #FFFFFF;
    border-radius: 20rpx;
    padding: 20rpx;
    position: relative;
    margin-bottom: 20rpx;

    .icon {
      width: 26rpx;
      height: 26rpx;
      display: block;
      margin-right: 15rpx;
    }

    .text {
      font-size: 26rpx;
      color: #5C5C5C;
    }

    .text1 {
      font-size: 26rpx;
      color: #202020;
    }
    .price{
      font-size: 36rpx;
      font-weight: 500;
      color: #202020;
    }
    .btns {
      border-radius: 30rpx;
      border: 1rpx solid #AAAAAA;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 26rpx;
      color: #5C5C5C;
      padding: 0 20rpx;
      height: 60rpx;
      line-height: 60rpx;
      text-align: center;
      margin-left: 10rpx;
    }

    .rightTop {
      position: absolute;
      width: 66rpx;
      height: 66rpx;
      top: 0;
      right: 0;
      border-radius: 0 20rpx 0 0;
      background: linear-gradient(225deg, #8BCA64 0%, rgba(255, 255, 255, 0.1) 35%, rgba(255, 255, 255, 1) 100%);
    }

    .status {
      position: absolute;
      top: 0;
      right: 0;
      padding: 20rpx;
      font-weight: 400;
      font-size: 26rpx;
      color: #AAAAAA;
      &.status1 {
        color: #8BCA64;
        &::after{
          position: absolute;
          content: "";
          left: -7rpx;
          top: 0;
          bottom: 0;
          margin: auto;
          width: 14rpx;
          height: 14rpx;
          background: #8BCA64;
          border-radius: 50%;
        }
      }

      &.status2 {
        color: #CB5000;
      }
    }
  }
</style>
